<template>
  <div class="app-container">
    <div class="cylinder-2">
      <div class="cylinder">
        <div v-loading="!isOption1OK" class="chart" style="margin: 20px 10px 20px 10px;">
          <Column v-if="isOption1OK" :option="option1" />
        </div>
      </div>
    </div>

    <div class="cylinder-3">
      <div class="cylinder">
        <div class="selectDateClass">
          <span style="font-size: 18px; font-weight: bold">选择展示日期：</span>
          <el-date-picker
            v-model="selectDate"
            type="date"
            size="small"
            :clearable="false"
            style="width: 140px"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            @change="changeDate"
          />
          <span style="font-size: 18px; font-weight: bold; margin-left: 20px">爬虫名称：{{ crawlerDetail.codeName }}</span>
        </div>
        <router-link :to="'/crawler/detail/' + id + '/0'">
          <el-button icon size="mini" type="primary">
            去处理
          </el-button>
        </router-link>
      </div>

      <div class="cylinder">
        <div v-loading="!isOption3OK" class="chart" style="margin: 10px 10px 0 10px;">
          <Column v-if="isOption3OK" :option="option4" />
        </div>
      </div>
      <div class="cylinder">
        <div v-loading="!isOption3OK" class="chart" style="margin: 10px 10px 20px 10px;">
          <Column v-if="isOption3OK" :option="option5" />
        </div>
        <div v-loading="!isOption6OK" class="chart" style="margin: 10px 10px 20px 0;">
          <Column v-if="isOption6OK" :option="option6" />
        </div>
        <div v-loading="!isOption7OK" class="chart" style="margin: 10px 10px 20px 0;">
          <Column v-if="isOption7OK" :option="option7" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Column from '@/views/analysis/components/Column'
import moment from 'moment'
import analysisApi from '@/api/analysis/analysis'

export default {
  name: 'Detail',
  components: {
    Column
  },
  data() {
    // 计算七日
    const now = new Date()
    const sevenDays = []
    for (let i = 0; i < 7; i++) {
      const d = new Date(now - i * 24 * 3600 * 1000)
      const month = (d.getMonth() + 1).toString().padStart(2, '0')
      const date = d.getDate().toString().padStart(2, '0')
      sevenDays.unshift(`${month}-${date}`) // 将日期拼成字符串添加到数组尾部
    }
    const nowDay = moment().format('YYYY-MM-DD')
    return {
      id: 0,
      crawlerDetail: {},
      selectDate: nowDay,
      isOption1OK: false,
      isOption3OK: false,
      isOption6OK: false,
      isOption7OK: false,
      option1: {
        title: {
          text: '七日内入库数量分布图' // 图表名称
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
        },
        toolbox: {
          feature: {
            magicType: {
              show: true,
              type: ['line'],
              option: {
                line: {
                  smooth: false
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: sevenDays
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'success',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: 'warning',
            position: 'right',
            alignTicks: true,
            // offset: 75,
            axisLine: {
              show: true,
              lineStyle: {
                // color: '#d76464'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: 'success',
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            data: []
          },
          {
            name: 'warning',
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            yAxisIndex: 1,
            itemStyle: {
              // color: '#d76464'
            },
            // animationDelay: function(idx) {
            //   return idx * 10 + 1000
            // },
            data: []
          }
        ]
      },
      option3: {
        title: {
          text: '24小时内入库数量分布图' // 图表名称
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {
            let category = params[0].name // {b} 对应的值
            const value = params[0].value // {c} 对应的值

            // 自定义处理逻辑
            category = category.replace(/(\d+)时/g, function(match, p1) {
              const num = parseInt(p1) // 将捕获到的数字字符串转换为整数
              return num + '时-' + (num + 1) + '时'
            })
            // 返回自定义格式化后的内容
            return category + '<br>' + '\u25CF ' + value
          }
        },
        legend: {
        },
        toolbox: {
          feature: {
            magicType: {
              show: true,
              type: ['bar']
              // option: {
              //   line: {
              //     smooth: false
              //   }
              // }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'success',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '',
            position: 'right',
            alignTicks: true,
            // offset: 75,
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: 'success',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            data: []
          }
        ]
      },
      option4: {
        title: {
          text: '24小时内警告数量分布图' // 图表名称
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {
            let category = params[0].name // {b} 对应的值
            const value = params[0].value // {c} 对应的值

            // 自定义处理逻辑
            category = category.replace(/(\d+)时/g, function(match, p1) {
              const num = parseInt(p1) // 将捕获到的数字字符串转换为整数
              return num + '时-' + (num + 1) + '时'
            })
            // 返回自定义格式化后的内容
            return category + '<br>' + '\u25CF ' + value
          }
        },
        legend: {
        },
        toolbox: {
          feature: {
            magicType: {
              show: true,
              type: ['bar'],
              option: {
                bar: {
                  itemStyle: {
                    color: '#d76464'
                  }
                }
              }
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'warning',
            position: 'left',
            alignTicks: true,
            // offset: 75,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#d76464'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '',
            position: 'right',
            alignTicks: true,
            // offset: 75,
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: 'warning',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            lineStyle: {
              color: '#d76464'
            },
            itemStyle: {
              color: '#d76464'
            },
            // animationDelay: function(idx) {
            //   return idx * 10 + 1000
            // },
            data: []
          }
        ]
      },
      option5: {
        title: {
          text: '警告类型分布图' // 图表名称
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'center'
        },
        toolbox: {
          feature: {
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            selectedMode: 'single',
            startAngle: 250,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              position: 'outer',
              alignTo: 'edge',
              margin: 10,
              formatter: '{b}: {c} ({d}%)' // 显示名称、数量和百分比
            },
            data: []
          }
        ]
      },
      option6: {
        title: {
          text: '警告类名分布图' // 图表名称
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'center'
        },
        toolbox: {
          feature: {
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            selectedMode: 'single',
            startAngle: 250,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              position: 'outer',
              alignTo: 'edge',
              margin: 10,
              formatter: '{b}: {c} ({d}%)' // 显示名称、数量和百分比
            },
            data: []
          }
        ]
      },
      option7: {
        title: {
          text: '警告处理状态分布图' // 图表名称
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'center'
        },
        toolbox: {
          feature: {
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            selectedMode: 'single',
            startAngle: 250,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              position: 'outer',
              alignTo: 'edge',
              margin: 10,
              formatter: '{b}: {c} ({d}%)' // 显示名称、数量和百分比
            },
            data: []
          }
        ]
      }
    }
  },

  created() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id
    }
    this.initData()
    this.getCrawlerDetail()
  },

  methods: {
    // 初始化数据
    initData() {
      this.getOption1()
      this.getOption3()
      this.getOption6()
      this.getOption7()
    },

    getCrawlerDetail() {
      analysisApi.getCrawlerDetail(this.id).then((response) => {
        this.crawlerDetail = response.data.result
      })
    },

    getOption1() {
      const sevenDaysAgo = moment().subtract(7, 'days').format('YYYY-MM-DD')
      analysisApi.getOption1(this.id, sevenDaysAgo).then((response) => {
        // 七日内入库数量赋值
        this.option1.series[0].data = response.data.result.success
        this.option1.series[1].data = response.data.result.errors
        this.isOption1OK = true
      })
    },

    // 获取24小时内数据
    getOption3() {
      this.isOption3OK = false
      analysisApi.getOption3(this.id, this.selectDate).then((response) => {
        // 24小时内入库数量赋值
        this.option3.series[0].data = response.data.result.success
        this.option4.series[0].data = response.data.result.errors

        // 24小时内警告错误类型数量，饼图
        const data = []
        for (const [key, value] of Object.entries(response.data.result)) {
          if (key !== 'success' && key !== 'errors') {
            let sum = 0
            value.forEach(function(num) {
              sum += num
            })
            const item = {
              value: sum,
              name: key
            }
            data.push(item)
          }
        }
        if (data.length === 0) {
          const item = {
            value: 0,
            name: '暂无警告'
          }
          data.push(item)
        }
        this.option5.series[0].data = data
        this.isOption3OK = true
      })
    },

    getOption6() {
      this.isOption6OK = false
      analysisApi.getOption6(this.id, this.selectDate).then((response) => {
        const responseData = response.data.result
        const data = []
        for (let i = 0; i < responseData.length; i++) {
          const item = {
            value: responseData[i].count,
            name: responseData[i].className
          }
          data.push(item)
        }
        if (data.length === 0) {
          const item = {
            value: 0,
            name: '暂无警告'
          }
          data.push(item)
        }
        this.option6.series[0].data = data
        this.isOption6OK = true
      })
    },

    getOption7() {
      this.isOption7OK = false
      analysisApi.getOption7(this.id, this.selectDate).then((response) => {
        const responseData = response.data.result
        const data = []
        for (let i = 0; i < responseData.length; i++) {
          const item = {
            value: responseData[i].count,
            name: responseData[i].status
          }
          const statusName = responseData[i].status
          const statusCount = responseData[i].count
          if (statusCount !== 0) {
            if (statusName === 0) {
              item.name = '未处理'
            } else if (statusName === 1) {
              item.name = '已处理'
            } else if (statusName === 2) {
              item.name = '已忽略'
            }
            data.push(item)
          }
        }
        if (data.length === 0) {
          const item = {
            value: 0,
            name: '暂无警告'
          }
          data.push(item)
        }
        this.option7.series[0].data = data
        this.isOption7OK = true
      })
    },

    changeDate() {
      this.getOption3()
      this.getOption6()
      this.getOption7()
    }

  }
}
</script>

<style scoped>
  .app-container {
    background-color: rgb(240, 242, 245);
  }
  .cylinder {
    display: flex;
    flex-wrap: nowrap;
  }
  .cylinder-2 {
    margin: 0 10px 20px 10px;
    /*background-color: rgb(202, 212, 226);*/
    background-color: #e2e1e1;
  }
  .cylinder-3 {
    margin: 0 10px 20px 10px;
    background-color: #e2e1e1;
  }
  .selectDateClass {
    flex: 1;
    height: auto;
    margin: 10px 0 0 12px;
  }
  .chart {
    flex: 1;
    height: 400px;
    margin: 0 10px 20px 10px;
    background-color: white;
  }
</style>
